<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Resume Detail</title>
    <link type="text/css" rel="stylesheet" href="/js/jsgrid/jsgrid.min.css" />
    <link type="text/css" rel="stylesheet" href="/js/jsgrid/jsgrid-theme.min.css" />

    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="/js/jsgrid/jsgrid.min.js"></script>

</head>
<body>
    <h1 style="text-align: center">.............. Resume ..........</h1>
    <div id="jsGrid"></div>
</body>
<script>

    // var clients = [];
    var clients = [{ id: 1, address: "北京", name: "张三", "phone":"112222222" },
        { id: 2, address: "上海", name: "李四", "phone":"112222222" },
        { id: 3, address: "⼴州", name: "王五", "phone":"112222222" }];
    function getData() {
        $.ajax(
            {
                url: '/resume/detail',
                type: 'POST',
                contentType: 'application/json;charset=utf-8',
                dataType: 'json',
                success: function (data) {
                    if (data.status == 200) {
                        clients = data.data;
                        // reloadData(data.data)
                        // console.log(clients);
                        // $("#jsGrid").jsGrid().trigger("reloadGrid");
                    } else {
                        alert(data.data);
                    }
                }
            }
        )
    }
    getData();
    function reloadData(data) {
        $("#jsGrid").jsGrid('setGridParam',{
            datatype:'local',
            data:data
        }).trigger("reloadGrid");
        alert("reload")
    }


    $("#jsGrid").jsGrid({
        width: "100%",
        height: "400px",

        inserting: true,
        editing: true,
        sorting: true,
        paging: false,
        autoload: true,

        controller: {
            loadData: function() {
                var d = $.Deferred();

                $.ajax({
                    url: "/resume/detail",
                    dataType: "json"
                }).done(function(response) {
                    d.resolve(response.data);
                });

                return d.promise();
            }
        },
        onItemDeleted: function(args) {
            $.ajax( {
                url: "/resume/delete",
                type: 'POST',
                dataType: "json",
                contentType: 'application/json;charset=utf-8',
                data: JSON.stringify(args.item),
                success: function (data) {
                    $("#jsGrid").jsGrid("loadData")
                }
            })
        },

        onItemInserted: function(args) {
            $.ajax( {
                url: "/resume/insert",
                type: 'POST',
                contentType: 'application/json;charset=utf-8',
                dataType: "json",
                data: JSON.stringify(args.item),
                success: function (data) {
                    $("#jsGrid").jsGrid("loadData")
                }
            })
        },
        onItemUpdated: function(args) {
            $.ajax( {
                url: "/resume/update",
                type: 'POST',
                dataType: "json",
                contentType: 'application/json;charset=utf-8',
                data: JSON.stringify(args.item),
                success: function (data) {
                    $("#jsGrid").jsGrid("loadData")
                }
            })
        },



        fields: [
            { name: "id", type: "text", width: 50, readOnly: true },
            { name: "name", type: "text", width: 150 },
            { name: "address", type: "text", width: 200 },
            { name: "phone", type: "text", width: 200},
            { type: "control" }
        ]
    });
</script>
</html>